<script type="text/javascript">
    $(document).ready(function(){
        document.getElementsByClassName("span-5")[0].style.display = "none";
        document.getElementsByClassName("span-16 last")[0].style.width = "100%";
        //Grilla de topografías
        jQuery("#tbGrillaTopo").jqGrid({
            url: '',
            datatype: 'json',
            mtype: 'POST',
            colNames:['Alias','Orden'],
            colModel :[
                {name:'ALSNOMBRE',index:'ALSNOMBRE', width:900,editable:false,align:"left"},
                {name:'ORDEN',index:'ORDEN', width:70,editable:true,align:"center", editrules:{number:true}},
            ],
            autowidth:true,
            pager: jQuery('#divPagTopo'),
            rowNum:10,
            rownumbers: true,
            editurl: '<?php echo $this->createUrl("modulosalias/editaAlias"); ?>',
            rowList:[10,20,30,50],
            sortname: 'orden',
            sortorder: "asc",
            viewrecords: true,
            caption: 'ALIAS',
            height:160
        });
        //Barra de navegación
        jQuery("#tbGrillaTopo").navGrid('#divPagTopo',{edit:true,add:false,del:true,search:true,view:true},{
            editData: {
                tipNucleo:function(){return document.getElementById("tipNucleo").value},
                modulo: function(){return document.getElementById("modulo_id").value},
                nucleo: function(){return document.getElementById("selNucleos").value}
            },
            afterSubmit : function(response, postdata){ 
                switch(parseInt(response.responseText)){
                    case 3: //ya existe el orden
                        alert("El orden sumistrado ya esta asignado");
                        break;
                }
                return true; 
            },
            closeAfterEdit:true
        },{},{
            delData: {
                tipNucleo:function(){return document.getElementById("tipNucleo").value},
                modulo: function(){return document.getElementById("modulo_id").value},
                nucleo: function(){return document.getElementById("selNucleos").value}
            }
        });       
    });
    function agregarAlias(){
        var nucleoId = document.getElementById("selNucleos").value;
        var moduloId = document.getElementById("modulo_id").value;
        var aliasId = document.getElementById("alias_id").value;
        var tipNucleo = document.getElementById("tipNucleo").value;
        var valOrden = document.getElementById("valOrden").value;
        if(nucleoId == "" || moduloId == "" || aliasId == "" || tipNucleo == ""){
            alert("Los campos núcleos, módulos y alias son obligatorios");
            return false;
        }
        $.post("<?php echo $this->createUrl("modulosalias/agregaAlias"); ?>",{tipNucleo:tipNucleo,alias:aliasId,modulo:moduloId,nucleo:nucleoId,orden:valOrden},function(data){
            switch(parseInt(data) ){
                case 1:
                    jQuery("#tbGrillaTopo").trigger("reloadGrid");
                    break;
                case 2: //ya existe dicha relacion
                    alert("No es posible relacionar más de una vez un mismo alias al módulo");
                    break;
                case 3: //ya existe el orden
                    alert("El orden sumistrado ya esta asignado");
                    break;
                default:
                    break;
            }
        }); //fin $.post("asdasdasdasdasd",{tipNucleo:tipNucleo,alias:aliasId,modulo:moduloId,nucleo:nucleoId},function(data){
    } //fin function agregarAlias(){
    function elijeNucleo(opcion){
        ocultarTodo();
        if(opcion == "") return false;
        var url = "index.php?r=modulosalias/cargaNucleos";
        $.ajax({
            url: url,
            async: false,
            data: "opcion=" + opcion,
            success: function(result) {
                var txtLabel = "";
                switch(opcion){
                    case 'basico':
                        txtLabel = "Núcleo Básico";
                        break;
                    case 'especifico':
                        txtLabel = "Núcleo Especifíco";
                        break;
                }
                document.getElementById("lbNucleos").innerHTML = txtLabel;
                document.getElementById("selNucleos").innerHTML = "";
                document.getElementById("selNucleos").innerHTML = result;
                document.getElementById("divNucleos").style.display = "block";
                ampliarChoosen("selNucleos_chzn");
                $("#selNucleos").trigger("liszt:updated");
            },
            beforeSend: function() {
                $(".upprogress").show();
            },
            error: function(result) {
                Alert_Ui("Error", result.status + ' ' + result.statusText);
            }
        });
        $(".upprogress").hide();
    } //fin function elijeNucleo(opcion){
    function cambiaNucleo(nucleoId){
        document.getElementById("divModuloAlias").style.display = "block";        
        var moduloId = document.getElementById("modulo_id").value;
        var tipNucleo = document.getElementById("tipNucleo").value;
//        ampliarChoosen("selNucleos_chzn");
        jQuery("#tbGrillaTopo").jqGrid('setGridParam',{url:"<?php echo $this->createUrl("modulosalias/cargaGrilla"); ?>&nucleo=" + nucleoId + "&modulo=" + moduloId + "&tipoNucleo=" + tipNucleo }).trigger("reloadGrid");
    } //fin function cambiaNucleo(nucleoId){
    function cambiaModulo(moduloId){
        var nucleo = document.getElementById("selNucleos").value;
        var tipNucleo = document.getElementById("tipNucleo").value;
        var url = "index.php?r=modulosalias/cargaralias";
        jQuery("#tbGrillaTopo").jqGrid('setGridParam',{url:"<?php echo $this->createUrl("modulosalias/cargaGrilla"); ?>&nucleo=" + nucleo + "&modulo=" + moduloId + "&tipoNucleo=" + tipNucleo }).trigger("reloadGrid");
        $.ajax({
            url: url,
            async: false,
            data: "nucleo="+ nucleo +"&tipNucleo=" + tipNucleo,
            success: function(result) {
                document.getElementById("alias_id").innerHTML = "";
                document.getElementById("alias_id").innerHTML = result;
                ampliarChoosen("alias_id_chzn");
                $("#alias_id").trigger("liszt:updated");
            },
            beforeSend: function() {
                $(".upprogress").show();
            },
            error: function(result) {
                Alert_Ui("Error", result.status + ' ' + result.statusText);
            }
        });
        $(".upprogress").hide();
        $(".alias-nucleos .portlet .portlet-content").toggle();
    }
    function ocultarTodo(){
        document.getElementById("divNucleos").style.display = "none";
        document.getElementById("divModuloAlias").style.display = "none";
        //        document.getElementById("divGrillas").style.display = "none";
        document.getElementById("divModuloAlias").style.display = "none";
        jQuery("#tbGrillaTopo").jqGrid('setGridParam',{url:"<?php echo $this->createUrl("modulosalias/cargaGrilla"); ?>&nucleo=-1&modulo=-1&tipoNucleo=especifico"}).trigger("reloadGrid");
    }
    function ampliarChoosen(classCssId){
        var domChoosen = document.getElementById(classCssId);
        domChoosen.style.width = "100%";
        domChoosen.getElementsByTagName("div")[1].style.width = "100%";
        domChoosen.getElementsByTagName("div")[1].getElementsByTagName("input")[0].style.width = "90%";
    }
</script>
<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
        height:auto;
        vertical-align:text-top;
        padding-top:2px;
    }
    .tbReporte{
        margin-top: 10px;
    }
    .tbReporte thead{
        background-color: #CCDDF0;
        font-weight: bolder;
        color: darkblue;
    }
    .tbReporte tbody tr:nth-child(even){
        background-color: #EAEAEA;
    }
    .clSegmentoDIV{
        display: none;width: 100%;margin: 9px 5px;
    }
    label{
        margin-right: 8px;
        /*        font-style: italic;*/
    }
</style>
<div id="divTitulo" style="font-size: 16px;font-weight: bolder" >ASIGNACIÓN DE ALIAS A MÓDULOS DE UN NÚCLEO DETERMINADO</div>
<form id="frReporte" target="prueba" >
    <div style="margin: 9px 5px">
        <label for="tipNucleo" >Núcleo</label>
        <select id="tipNucleo" name="tipNucleo" class="Ccombo" onchange="elijeNucleo(this.value);" style="width: 120px"  >
            <option value="">Elija</option>
            <option value="basico">Básico</option>
            <option value="especifico">Específico</option>
        </select>
    </div>
    <div id="divNucleos" class="clSegmentoDIV">
        <label for="selNucleos" id="lbNucleos" ></label>
        <select id="selNucleos" name="selNucleos" class="Ccombo" onchange="cambiaNucleo(this.value);" style="width: 100%">
            <option value="">Seleccione</option>
        </select>
    </div>
    <div id="divModuloAlias" class="clSegmentoDIV">
        <label for="modulo_id" style="display: block">Módulo</label>
        <?php
        echo CHtml::dropDownList('modulo_id', '', array("" => "") + GxHtml::listDataEx(Modulos::model()->findAll(array('order' => 'MODORDEN'))), array('class' => 'Ccombo CcomboM', 'prompt' => '', "onchange" => "cambiaModulo(this.value);"));
        ?>
        
        <label for="alias_id" style="display: block;margin-top: 3px">Alias</label>
        <?php
        echo CHtml::dropDownList('alias_id', '', array(), array('class' => 'Ccombo CcomboM', 'prompt' => ''));
        ?>
        <div style="margin-top: 3px">
        <label for="lbOrden" style="">Orden:</label><input type="text" size="3" id="valOrden" style="padding: 6px 1px 6px 4px;" class="Cnumero" />
        <input type="button" value="Agregar Alias" class="buttonA"  onclick="agregarAlias();" />
        </div>
    </div>
    <div style="width: 100%">
    <div id="divPagTopo" class="scroll" style="text-align:center;"></div>
    <table id="tbGrillaTopo" class="scroll" style="font-size: 14px"></table>
    </div>
</form>
<div class="upprogress">
    <img alt="Cargando..." src="images/loading.gif" />
</div>
<div id="divTablaConsulta">


</div>